<template>
  <Card title="快捷跳转" v-bind="$attrs">
    <template #extra>
      <!-- <a-button type="link" size="small">更多</a-button> -->
    </template>

    <CardGrid class="!md:w-1/3 !w-full" @click="goStudentGroup">
      <span class="flex">
        <Icon :icon="t('data.top.icon')" :color="t('data.top.color')" size="30" />
        <span class="text-lg ml-4">{{ t('data.top.title') }}</span>
      </span>
    </CardGrid>
    <CardGrid @click="goLinkage">
      <span class="flex">
        <Icon :icon="t('data.tops.icon')" size="30" />
        <span class="text-lg ml-4">{{ t('data.tops.title') }}</span>
      </span>
    </CardGrid>
       <CardGrid @click="goCampusStyle">
      <span class="flex">
        <Icon :icon="t('data.topss.icon')" size="30" />
        <span class="text-lg ml-4">{{ t('data.topss.title') }}</span>
      </span>
    </CardGrid>
      <CardGrid @click="godeptArticles">
      <span class="flex">
        <Icon :icon="t('data.topsss.icon')" size="30" />
        <span class="text-lg ml-4">{{ t('data.topsss.title') }}</span>
      </span>
    </CardGrid>
  </Card>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import { Card } from 'ant-design-vue';
  import { Icon } from '/@/components/Icon';
  import { useGo } from '/@/hooks/web/usePage';
  import { useI18n } from '/@/hooks/web/useI18n';

  export default defineComponent({
    components: { Card, CardGrid: Card.Grid, Icon },
    setup() {
      const { t } = useI18n();
      const go = useGo();

      const goStudentGroup = function () {
        console.log('goStudentGroup');
        go('/student/studentgroup');
      };
      const goLinkage = function () {
        go('/student/social');
      };
      const goCampusStyle = function () {
        go('/student/wonderful');
      };

      const godeptArticles = function(){
         go('/student/PublishedArticles');
      }
      return { t, goStudentGroup, goLinkage, goCampusStyle,godeptArticles };
    },
  });
</script>
